<template>
	<view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>
	<view v-else class="user_edit wap">
		<view v-if="!IsFin" class="tip f3">完善个人资料，可以获得1000积分</view>
		
		<view class="user_body">
			<view class="user_head">
				<button class="user_header_btn" hover-class="none"  @click="iscro = true">
					<view class="cover_btn">
						<image class="image_user" v-if="isHeader" @error="isHeader = false" :src="reqData.HeadImgUrl"
							mode="aspectFill" />
						<image class="iamge_icon" v-else src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/hd.png" mode="" />
					</view>
					<button class="icon">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1724917442278825.png" mode="aspectFill"></image>
					</button>
				</button>
			</view>		
				
			<view class="user_cell">
				<view class="tit">
					基本信息
				</view>
				<view class="cell_main">
					<view class="info_cell">
						<view class="info_tit">
							昵称
						</view>
						<view class="inp">
							<input type="nickname" maxlength="10" v-model="reqData.Name" placeholder="请输入昵称" />
						</view>
					</view>
					<view class="info_cell"  >
						<!-- @click="showSex = true" -->
						<view class="info_tit">
							性别
						</view>
						<view class="inp">
							<input  v-model="reqData.Sex" disabled placeholder="请选择性别" />
							<!-- <uni-icons type="right" size="14" color="#adadad"></uni-icons> -->
						</view>
					</view>
					<view class="info_cell" @click="showBirthday = true">
						<view class="info_tit">
							生日
						</view>
						<view class="inp">
							<input  v-model="reqData.Birthday" disabled placeholder="请选择生日日期" />
							<uni-icons type="right" size="14" color="#adadad"></uni-icons>
						</view>
					</view>
					<view class="info_cell" @click="showCity = true">
						<view class="info_tit">
							地区
						</view>
						<view class="inp">
							<input  v-model="cityStr" disabled placeholder="请选择地区" />
							<uni-icons type="right" size="14" color="#adadad"></uni-icons>
						</view>
					</view>
					<block  v-if="reqData.Sex=='女'">
						<view class="info_cell">
							<view class="info_tit">
								身高
							</view>
							<view class="inp">
								<input type="number" v-model="reqData.Height" placeholder="请输入身高" />
								<view class="inp_append">cm</view>
							</view>
						</view>						
						<!-- <view class="info_cell">
							<view class="info_tit">
								体重
							</view>
							<view class="inp">
								<input type="number" v-model="reqData.Weight" placeholder="请输入体重" />
								<view class="inp_append" style="margin-left: 14rpx;">kg</view>
							</view>
						</view> -->
					</block>
				</view>
			</view>
			
			<view class="user_cell">
				<view class="tit">
					个人设置
				</view>
				<view class="cell_main">
					<view class="info_cell">
						<view class="info_tit">
							手机号
						</view>
						<view class="inp">
							<input type="tel" maxlength="11" v-model="reqData.Phone" placeholder="请输入手机号" />
							<button class="inp_btn" open-type="getPhoneNumber" @getphonenumber="getNums">
								绑定手机
							</button>
						</view>
					</view>
					<view class="info_cell">
						<view class="info_tit">
							微信号
						</view>
						<view class="inp">
							<input type="text" v-model="reqData.WechatNo"  placeholder="请输入微信号" />
							
						</view>
					</view>
					<view class="info_cell info_switch">
						<view class="info_tit">
							加我微信时需要我同意
						</view>
						<view class="inp">
							<switch :checked="reqData.IsAuditApplyWX==1?false:true" color="#111" style="transform:scale(0.8)" @change="wxSwitch()"/>
						</view>
					</view>
					
					
				</view>
			</view>
			
			<view class="user_cell" style="margin-bottom: 20rpx;">
				<view class="titbox">
					<view class="tit">
						我的标签
					</view>
					<view class="iconbox"  @click="nav_to('/pages/user/tag')">
						<view class="lit">
							编辑
						</view>
						<uni-icons type="right" size="14" color="#adadad"></uni-icons>
					</view>
				</view>
				
				<view class="cell_tag" v-if="tag.length">
					<view class="tag_box" v-for="(item,index) in tag" :key="index">
						{{item}}
					</view>
				</view>
				<view class="cell_main" v-else>
					<view class="cell_tips">
						添加标签，找到更多兴趣相同的好友～
					</view>
				</view>
			</view>
			
			<view class="user_cell">
				<view class="titbox">
					<view class="tit">
						自我介绍
					</view>
				</view>
				
				<view class="cell_main"  style="padding-bottom: 20rpx;">
					<view class="group_textarea">
						<u--textarea v-model="reqData.Descript" height="80" maxlength="100" count
							placeholder="写上这个简介,你都比其他优秀啦" style="color: #111;"></u--textarea>
					</view>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
		</view>
		
		
		
		<!-- <view class="group" @click="nav_to('/pages/user/user_sportimg')">
			<view class="lab">编辑运动背景图</view>
			<view class="inp_box" style="opacity: 0;">
				<input type="text" v-model="cityStr" disabled placeholder="选择地区" />
			</view>
			<view class="icon_box"><uni-icons type="right" size="18" color="#E7E7E7"></uni-icons></view>
		</view> -->
		<!-- <view class="group" v-if="reqData.Sex=='男'" @click="showIncome = true">
			<view class="lab">年收入</view>
			<view class="inp_box">
				<input type="text" v-model="reqData.Income" disabled="true" placeholder="年收入" />
			</view>
		</view> -->
		

		

		<view class="btn_save" @click="sub">
			<view class="save_btn">
				保存
			</view>
		</view>

		<u-picker :show="showSex" immediateChange @cancel="showSex = false" @confirm="setSex"
			:columns="[['男', '女']]"></u-picker>
		<u-picker :show="showIncome" immediateChange @cancel="showIncome = false" @confirm="setIncome"
			:columns="[['100万以下', '100-200万', '200-500万', '500万以上']]"></u-picker>
		<u-datetime-picker immediateChange ref="datetimePicker" @cancel="showBirthday = false" :show="showBirthday"
			:minDate="minDate" :maxDate="maxDate" mode="date" v-model="nowDate"
			@confirm="setBirthday"></u-datetime-picker>
		<u-picker :show="showCity" @cancel="showCity = false" immediateChange ref="uPicker" :columns="cityList"
			@change="changeHandler" @confirm="setCity"></u-picker>

		<qfimagecropper :src="reqData.HeadImgUrl" :zIndex="99" v-if="iscro" :width="666" :height="666" @crop="cropView">
		</qfimagecropper>
	</view>
</template>

<script>
import address from "./address.js";
import qfimagecropper from "@/pages/user/components/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue"
export default {
	components: {
		qfimagecropper
	},
	data() {
		let d = new Date("1923/1/1");
		console.log(d);
		let nowD = new Date().getTime();
		return {
			iscro: false,
			IsFin: false,
			load: false,
			cityStr: "",
			cityList: [],
			height: "", // 身高
			weight: "", // 体重
			showCity: false,
			nowDate: nowD,
			minDate: d.getTime(),
			maxDate: nowD,
			showBirthday: false,
			showIncome: false,
			showSex: false,
			user: {},
			isHeader: true,
			reqData: {
				PlayFee: 0,
				IsFee: 0,
				IsOpenMember: "",
				Name: "",
				Phone: "",
				HeadImgUrl: "",
				Descript: "",
				GolfPoint: "",
				Sex: "",
				Province: "",
				City: "",
				Birthday: "",
				BgImg: "",
				UserImgs: "",
				WechatNo: "",
				Income: "",
				Height: "",
				Weight: "",
				IsAuditApplyWX: 0,
			},
			tag:[],
		};
	},
	methods: {
		wxSwitch(){
			this.reqData.IsAuditApplyWX = this.reqData.IsAuditApplyWX==1 ? 2 : 1
		},
		handleCrop(e) {
			console.log(e.tempFilePath);
			uni.previewImage({
				urls: [e.tempFilePath],
				current: 0,
			});
		},
		async FinishedInfo() {
			let res = await this.$api.post("User/IsFinishedInfo");
			if (res.code == 0) {
				this.IsFin = res.data;
			}
		},
		getNowDate12() {
			let now = new Date();
			let year = now.getFullYear();
			let moon = now.getMonth() + 1;
			let day = now.getDate();
			let dateTime = `${year - 12}-${moon < 10 ? "0" + moon : moon}-${day < 10 ? "0" + day : day
				}`;
			this.maxDate = new Date(dateTime).getTime();
		},
		radioCheck(e) {
			this.reqData.IsAuditApplyWX = e;
		},
		getNums(e) {
			let _this = this;

			uni.login({
				provider: "weixin",
				success: async (res) => {
					let d = {
						encryptedData: e.detail.encryptedData,
						code: res.code,
						aesIv: e.detail.iv,
					};
					let res3 = await _this.$api.post("User/GetPhoneNumber", d);

					_this.reqData.Phone = res3.data;
				},
				fail: (err) => {
					uni.showModal({
						content: "获取失败",
						showCancel: false,
					});
				},
			});
		},
		lookImg(obj) {
			console.log(obj);
			let ind = 0;
			let lookList = this.localList.map((item, index) => {
				if (item.ID == obj.ID) {
					ind = index;
				}
				return {
					ID: item.ID,
					url: item.netPath || item.ImgPath,
				};
			});
			let urlList = lookList.map((e) => e.url);
			console.log(lookList, ind);

			uni.previewImage({
				current: ind,
				urls: urlList,
			});
		},
		lookImg2(obj) {
			console.log(obj);
			let ind = 0;
			let lookList = this.oldImgeList.map((item, index) => {
				if (item.ID == obj.ID) {
					ind = index;
				}
				return {
					ID: item.ID,
					url: item.netPath || item.ImgPath,
				};
			});
			let urlList = lookList.map((e) => e.url);
			console.log(lookList, ind);

			uni.previewImage({
				current: ind,
				urls: urlList,
			});
		},
		setHYFM(item) {
			this.reqData.UserImgs = item.netPath;
			setTimeout(() => {
				this.$pv.msg("设置成功!");
			}, 500);
		},
		setIncome(e) {
			this.reqData.Income = e.value[0];

			this.showIncome = false;
		},
		async setHD(item) {
			console.log(item.netPath);
			this.reqData.HeadImgUrl = item.netPath;
		},
		setIsOpenMember(e) {
			console.log(e);
			this.reqData.IsOpenMember = e ? 1 : 0;
		},
		setIsFee(e) {
			this.reqData.IsFee = e ? 1 : 0;
		},
		setUserImgs() {
			let _this = this;
			uni.chooseMedia({
				count: 1, //默认9
				mediaType: ["image"],
				sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ["album"], //从相册选择
				success: async function (res) {
					console.log(res, "------look");
					let r = await _this.uploading(res.tempFiles[0].tempFilePath);
					_this.reqData.UserImgs = r;
				},
			});
		},
		setName(e) { },
		setPhone(e) { },
		async setBirthday(e) {
			console.log(e.value);
			this.reqData.Birthday = await uni.$u.date(e.value, "yyyy-mm-dd");
			this.showBirthday = false;
		},
		setCity(e) {
			this.reqData.Province = e.value[0];
			if (e.value[1] === "--") {
				this.reqData.City = this.reqData.Province;
				this.cityStr = e.value[0];
			} else {
				this.reqData.City = e.value[1];
				this.cityStr = e.value[0] + " " + e.value[1];
			}
			this.showCity = false;
		},
		setSex(e) {
			this.reqData.Sex = e.value[0];
			this.showSex = false;
		},

		async cropView(e) {
			//   console.log(e, "eeeeeeeeeeee");
			let _this = this;
			let o = {
				ID: "",
				duration: 0,
				fileType: "image",
				tempUrl: e.tempFilePath,
				flieUrl: e.tempFilePath,
				tempKey: uni.$u.guid(8),
				pro: 0,
				netPath: "",
			};

			let r = await _this.uploadingList(
				o.flieUrl,
				o.tempKey,
				new Date().getTime() - 500
			);
			_this.reqData.HeadImgUrl = r;
			_this.isHeader = true;
		},

		async chooseavatar(e) {
			try {
				let _this = this;
				uni.chooseImage({
					count: 1, //默认9
					mediaType: ["image"],
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["camera", "album"], //从相册选择
					success: async function (res) {
						let o = {
							ID: "",
							duration: 0,
							fileType: "image",
							tempUrl: res.tempFiles[0].path,
							flieUrl: res.tempFiles[0].path,
							tempKey: uni.$u.guid(8),
							pro: 0,
							netPath: "",
						};

						let r = await _this.uploadingList(
							o.flieUrl,
							o.tempKey,
							new Date().getTime() - 500
						);
						_this.reqData.HeadImgUrl = r;
						_this.isHeader = true;
					},
				});
			} catch (error) {
				this.$pv.msg("图片上传失败");
				console.log(error);
			}
		},
		async uploadingList(url, tempKey, timeStamp) {
			this.$pv.load("正在上传");
			const r = await this.$upload(url, () => { });

			this.$pv.closeLoad("");
			this.iscro = false
			return r;
		},
		async sub() {
			console.log(this.reqData);

			if (!this.reqData.HeadImgUrl) {
				this.$pv.msg("请上传头像");
				return;
			}

			if (!this.reqData.Name) {
				this.$pv.msg("请输入昵称");
				return;
			}
			if (!this.reqData.Phone) {
				this.$pv.msg("请输入手机号");
				return;
			}
			if (!this.reqData.WechatNo) {
				this.$pv.msg("请输入您的微信号");
				return;
			}

			if (!this.reqData.Sex) {
				this.$pv.msg("请选择性别");
				return;
			}

			this.reqData.UserImgs = this.reqData.HeadImgUrl;
			this.$pv.load("正在处理");
			let o = {};
			for (let key in this.reqData) {
				if (this.reqData[key] == "Name") {
					o[key] = this.$util.utf16ToEntities(this.reqData[key]);
				} else if (this.reqData[key] != "") {
					o[key] = this.reqData[key];
				}
			}
			o.Descript = this.$util.utf16ToEntities(this.reqData.Descript);
			let res = await this.$api.post("User/Update", o);
			this.$pv.closeLoad();
			this.$pv.msg("已经保存");
			this.nav_back(1000);
		},
		formatter(type, value) {
			if (type === "year") {
				return `${value}年`;
			}
			if (type === "month") {
				return `${value}月`;
			}
			if (type === "day") {
				return `${value}日`;
			}
			return value;
		},
		changeHandler(e) {
			console.log(e);
			const {
				columnIndex,
				index,
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				picker = this.$refs.uPicker,
			} = e;
			if (columnIndex === 0) {
				picker.setColumnValues(
					1,
					address[index].children.map((item) => {
						if (item.name == "市辖区" || item.name == "县") {
							return "--";
						} else {
							return item.name;
						}
					})
				);
			}
		},
	},
	async onLoad() {
		this.getNowDate12();
		this.FinishedInfo();
		let u = uni.getStorageSync("user");
		let res = await this.$api.post("User/GetUserInfo", {
			ID: u.UserID,
		});

		this.user = res.data;
		for (let key in this.reqData) {
			this.reqData[key] = this.user[key] || "";
			if (key === "Birthday") {
				let d = new Date(this.reqData[key]);
				this.reqData[key] = this.time = uni.$u.timeFormat(
					d.getTime(),
					"yyyy-mm-dd"
				);
			}
			if (key == "Name") {
				this.reqData[key] = this.$util.entitiesToUtf16(this.user[key]);
			}
			if (key == "Descript") {
				this.reqData[key] = this.$util.entitiesToUtf16(this.user[key]);
			}
		}
		let add = address;
		console.log(add.children);
		let arr1 = add.map((item) => item.name);
		let arr2 = add[0].children.map((item) => {
			if (item.name == "市辖区" || item.name == "县") {
				return "--";
			} else {
				return item.name;
			}
		});
		this.cityList = [arr1, arr2];
		this.load = true;

		uni.$on("user_upload", async (res) => {
			// this.reqData.HeadImgUrl=res.url;
			// this.reqData.UserImgs=res.source;
			console.log(res, " '--------user_upload'");
			let r1 = await this.uploading(res.url);
			console.log(r1, " '--------r1'");
			let r2 = await this.uploading(res.source);
			console.log(r2, " '--------r1'");
			this.reqData.HeadImgUrl = r1;
			this.reqData.UserImgs = r2;
		});
		uni.$on('iscro', async data => {
			this.iscro = data
		})
	},
	onUnload() {
		uni.$off("user_upload");
		uni.$off("iscro");
	},
	async onShow() {
		let u = uni.getStorageSync('user');
		let res = await this.$api.post('User/GetUserInfo', {
			ID: u.UserID
		});
		this.user = res.data;
		if(res.data.Tag){
			this.tag = this.user.Tag.split(',')
		}else{
			this.tag = []
		}
	},
	watch: {
		"reqData.City": function (newVal) {
			this.cityStr = `${this.reqData.Province} ${this.reqData.City}`;
		},
		reqData: {
			deep: true, //true为进行深度监听,false为不进行深度监听
			async handler(newVal) {
				let o = {};
				for (let key in newVal) {
					if (this.reqData[key] != "") {
						o[key] = this.reqData[key];
					}
				}
				// let res = await this.$api.post("User/Update", o);
			},
		},
	},
	onReady() { },
};
</script>

<style lang="scss">
page{
	background-color: #f6f6f6;
}
button[plain] {
	border: 0;
}

button::after {
	border: none;
}

.image-cropper {
	z-index: 999 !important;
}

.user_edit {
	padding-bottom: 100rpx;
}

.tip {
	margin-top: 32rpx;
	height: 70rpx;
	background: #fff7e0;
	border-radius: 4rpx;
	color: #e3a029;
	line-height: 70rpx;
	text-align: center;
}

.user_header_btn {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	border-radius: 0;
}

.user_header,
.cover_btn {
	border-radius: 10rpx;
	overflow: hidden;
	height: 100rpx;
	width: 100rpx;
	background: rgba(255, 255, 255, 0.1);
	margin-left: 0;
	display: flex;
	// text-align: center;
	justify-content: center;
	align-items: center;

	.iamge_icon {
		height: 60rpx;
		width: 60rpx;
	}

	.image_user {
		height: 100%;
		width: 100%;
	}
}

.lab {
	height: 90rpx;
	padding-right: 10rpx;
	color: #333333;
	font-size: 32rpx;
	line-height: 90rpx;
	display: flex;

	.must {
		color: #ef4034;
		font-size: 32rpx;
		margin-top: 7rpx;
	}

	.msg {
		display: inline-block;
		padding-left: 10rpx;
		font-size: 28rpx;
		color: #dd3232;
	}
}

.group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	position: relative;

	&::after {
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		height: 2rpx;
		content: "";
		transform: scaleY(0.6);
		background-color: #e4e4e4;
	}

	.inp_box {
		flex: 1;
		display: flex;
		align-items: center;
		flex-direction: row;

		input {
			width: 100%;
			text-align: right;
			color: #999999;
			font-size: 32rpx;
		}

		.radio_s {
			display: flex !important;
			height: 100rpx;
		}

		.item_check {
			padding: 10rpx;
			display: flex;
			flex-direction: row;

			.desc {
				color: #000 !important;
			}
		}
	}

	.icon_box {
		height: 40rpx;
		width: 40rpx;
		line-height: 40rpx;
	}

	.inp_append {
		margin-left: 8rpx;
	}

	.s_btn {
		color: #fff;
		font-size: 24rpx;
		width: 170rpx !important;
		height: 60rpx !important;
		border-radius: 5rpx;
		background-color: #0d0d0d;
		margin: 0 0 0 20rpx;
	}
}

.group_check {
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	line-height: 90px;
	height: 190rpx;

	.inp_box_c {
		flex: 1;
		display: flex;
		flex-direction: column;

		view {
			height: 70rpx;
			color: #666666;
		}

		input {
			width: 100%;
			text-align: right;
		}
	}
}

.group_img {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	// line-height: 180rpx;
	height: 90rpx;

	&::after {
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		height: 2rpx;
		content: "";
		transform: scaleY(0.6);
		background-color: #e4e4e4;
	}

	.wxlab {
		height: 60rpx;
		padding-right: 10rpx;
		color: #333333;
		font-size: 32rpx;
		line-height: 60rpx;

		.must {
			color: #ef4034;
			font-size: 32rpx;
		}

		.desc {
			color: #dc7e78;
			font-size: 28rpx;
			margin-top: 16rpx;
		}

		.req_t {
			color: #ff557f !important;
		}
	}

	.inp_box {
		flex: 1;
		display: flex;
		align-items: center;

		input {
			width: 100%;
			text-align: right;
		}
	}

	.inp_box_c {
		flex: 1;
		display: flex;
		flex-direction: column;

		view {
			height: 70rpx;
		}

		input {
			width: 100%;
			text-align: right;
		}
	}
}

.group_hd {
	height: auto;
	padding-bottom: 20rpx;
	padding-top: 20rpx;
}

.m40 {
	margin-top: 50rpx;
}

// .group_textarea {
// 	flex: 1;
// 	height: 200rpx;
// 	padding-top: 12rpx;
// 	padding-left: 10rpx;
// 	padding-right: 10rpx;
// 	// border-style: none;
// 	background-color: #f8f8f8;

// 	/deep/ .u-textarea {
// 		background: none !important;
// 		// border-bottom: none !important;
// 		// border-color: rgba(64, 64, 64, 1) !important;
// 		padding-left: 20rpx;
// 	}

// 	/deep/ .u-textarea__count {
// 		background: none !important;
// 		color: #999999 !important;
// 	}

// 	/deep/ .u-textarea__field {
// 		color: #999999 !important;
// 	}
// }

.inp_box_r {
	display: flex;
	justify-content: flex-end;
}

.text_r {
	text-align: right;
}

.group_warp {
	padding-bottom: 20rpx;
	display: block;
	height: auto;
}

.imgvideo {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	&::after {
		height: 1px;
		width: 220rpx;
		display: block;
		content: "";
	}

	.item {
		position: relative;
		margin-top: 15rpx;
		width: 220rpx;
		height: 220rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 16rpx;

		.pro {
			position: absolute;
			top: 50%;
			width: 100%;
			transform: translateY(-50%);
			text-align: center;
			color: #888;
		}

		image {
			height: 100%;
			width: 100%;
			border-radius: 16rpx;
		}

		.del_con {
			position: absolute;
			top: 0;
			right: 0;
			background: rgba(0, 0, 0, 0.4);
			height: 40rpx;
			width: 40rpx;
			text-align: center;
			line-height: 40rpx;
			border-radius: 0 16rpx 0 16rpx;
		}

		.bottomset {
			position: absolute;
			width: 100%;
			bottom: 0;
			left: 0;
			height: 50rpx;
			background: #404040;
			color: #fff;
			text-align: center;
			align-items: center;
			font-size: 24rpx;
			line-height: 50rpx;
			opacity: 0.7;
		}
	}

	.item_add {
		position: relative;

		&::before,
		&::after {
			display: block;
			content: "";
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			position: absolute;
			height: 40rpx;
			width: 8rpx;
			border-radius: 8rpx;
			background: #fff;
			border-radius: 10rpx;
		}

		&::before {
			transform: rotate(90deg);
		}
	}
}

.iamge_list_sm {
	margin-top: 10rpx;
	margin-bottom: 20rpx;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;

	.tit {
		width: 100%;
		line-height: 2;
	}

	.item {
		height: 90rpx;
		width: 90rpx;

		image {
			height: 100%;
			width: 100%;
		}
	}

	.more {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 4rpx;
		background: rgba(254, 240, 188, 0.1);
	}
}

.user_body{
			.user_head{
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 50rpx 0;
				.user_header_btn {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					.icon{
						position: absolute;
						right: 36%;
						bottom: -26rpx ;
						transform: translate(0,-50%);
						width: 64rpx;
						height: 64rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.cover_btn {
						border-radius: 50%;
						overflow: hidden;
						height: 160rpx;
						width: 160rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					
						.iamge_icon {
							height: 60rpx;
							width: 60rpx;
						}
					
						.image_user {
							height: 100%;
							width: 100%;
						}
					}
				}
			}
			.user_cell{
				margin-bottom: 44rpx;
				.tit{
					font-weight: bold;
					font-size: 36rpx;
					color: #111;
					margin-bottom: 32rpx;
				}
				.titbox{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 32rpx;
					.tit{
						margin-bottom: 0;
						display: flex;
						align-items: center;
						text{
							color: #fff;
						};
						.right_badge {
							margin-left: 16rpx;
							width: 40rpx;
							height: 40rpx;
						}
					}
					.iconbox{
						display: flex;
						align-items: center;
						.lit{
							font-size: 32rpx;
							color: #333;
						}
					}
				}
				.cell_tag{
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					.tag_box{
						background: #363636;
						border-radius: 32rpx;
						padding: 10rpx 32rpx;
						font-size: 32rpx;
						color: #fff;
						margin-right: 16rpx;
						margin-bottom: 26rpx;
					}
				}
				.cell_main{
					padding:0 32rpx;
					background: #fff;
					border-radius: 26rpx;
					
					.cell_tips{
						padding: 60rpx 0;
						text-align: center;
						border-radius: 26rpx;
						font-size: 28rpx;
						color: rgba(255,255,255,0.6);
						margin-bottom: 44rpx;
					}
					.info_cell{
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 2rpx solid #eee;
						.info_tit{
							font-size: 32rpx;
							color: #111;
						}
						.inp{
							flex: 0.7;
							display: flex;
							align-items: center;
							.inpText{
								// flex: 1;
								width: 430rpx;
								padding: 32rpx 0;
								font-size: 30rpx;
								text-align: right;
								overflow: hidden;  /*超出部分隐藏*/
								white-space: nowrap;  /*禁止换行*/
								text-overflow: ellipsis; /*省略号*/

							}
							input{
								flex: 1;
								text-align: right;
								font-size: 30rpx;
								padding: 32rpx 0;
								color: #333;
							}
							.inp_append{
								margin-left: 8rpx;
								font-size: 24rpx;
								color: #111;
							}
							.inp_btn{
								margin-left: 12rpx;
								width: 120rpx;
								height: 54rpx;
								background: #111;
								border-radius: 8rpx;
								font-size: 24rpx;
								color: #fff;
								display: flex;
								align-items: center;
								justify-content: center;
							}
							
						}
						
					}
					.info_cell:last-child{
						border-bottom: 0;
					}
					
					.info_switch{
						.info_tit{
							flex: 1;
						}
						.inp{
							flex: none;
							padding: 32rpx 0;
							margin-right: -20rpx;
						}
					}
					.group_textarea {
						flex: 1;
						border-radius: 26rpx;
						
						// background-color: #111;
						/deep/ .u-textarea {
							background: none !important;
							border: none !important;
							border-color: rgba(64, 64, 64, 1) !important;
							padding: 32rpx 0;
							padding-bottom: 20rpx;
							textarea{
								
							color: #111 !important;
							}
						}
					
						/deep/ .u-textarea__count {
							background: none !important;
							font-size: 28rpx;
							color: #999;
						}
					
						/deep/ .u-textarea__field {
							font-size: 32rpx !important;
							color: #f7f7f7;
						}
					}
				}
			}
		}
		

	.btn_save {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		background: #fff;
		padding: 20rpx 26rpx;
		padding-bottom: 40rpx;
		z-index: 98;
		.save_btn{
			border-radius: 50rpx;
			font-size: 30rpx;
			color: #fff;
			padding: 20rpx 0;
			text-align: center;
			background-color: #111;
		}
	}

</style>